<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>会员管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box clearfix">
            <div class="fr">
                <el-input placeholder="用户名" size="mini" class="handle-input" v-model="uname"></el-input>
                <el-select v-model='committee' size="mini" class="handle-input" placeholder="请选择专业委员会"
                           v-if="isAdmin">
                    <el-option value=" " label='全部'>全部</el-option>
                    <el-option value="心理健康专业委员会" label='心理健康专业委员会'>心理健康专业委员会</el-option>
                    <el-option value="心理咨询与治疗专业委员会" label='心理咨询与治疗专业委员会'>心理咨询与治疗专业委员会</el-option>
                    <el-option value="婴幼儿心理与学前教育专业委员会" label='婴幼儿心理与学前教育专业委员会'>婴幼儿心理与学前教育专业委员会</el-option>
                    <el-option value="精神分析专业委员会" label='精神分析专业委员会'>精神分析专业委员会</el-option>
                    <el-option value="临床心理专业委员会" label='临床心理专业委员会'>临床心理专业委员会</el-option>
                    <el-option value="员工心理援助专业委员会" label='员工心理援助专业委员会'>员工心理援助专业委员会</el-option>
                    <el-option value="儿童、青少年心理援助专业委员会" label='儿童、青少年心理援助专业委员会'>儿童、青少年心理援助专业委员会</el-option>
                    <el-option value="沙盘心理技术专业委员会" label='沙盘心理技术专业委员会'>沙盘心理技术专业委员会</el-option>
                </el-select>
                <!--<el-input placeholder="年份" size="mini" class="handle-input" v-model="year"></el-input>-->
                <el-select v-model='cardstatus' size="mini" class="handle-input" placeholder="请选择会员状态">
                    <el-option value="  " label='全部'>全部</el-option>
                    <!--<el-option value="0" label='未提交申请'>未提交申请</el-option>-->
                    <el-option value="1" label='已提交申请,待初审'>已提交申请,待初审</el-option>
                    <el-option value="2" label='初审不通过'>初审不通过</el-option>
                    <el-option value="3" label='已通过初审,待终审'>已通过初审,待终审</el-option>
                    <el-option value="4" label='终审不通过'>终审不通过</el-option>
                    <el-option value="5" label='已通过终审,待缴费'>已通过终审,待缴费</el-option>
                    <el-option value="6" label='正常缴费'>正常缴费</el-option>
                    <el-option value="7" label='老会员,未续费'>老会员,未续费</el-option>
                </el-select>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="search">查询</el-button>
            </div>
            <el-button type="primary" size="mini" icon="" @click="exportExcel">会员信息导出</el-button>
            <el-button type="primary" size="mini" v-if="showAudit&&!isAdmin" icon="" @click="batchAudit">批量初审
            </el-button>
            <el-button type="primary" size="mini" v-if="showAudit&&isAdmin" icon="" @click="batchAudit">批量终审</el-button>

        </div>
        <el-table @selection-change="selsChange"
                  size="mini"
                  :data="tableData"
                  border
                  style="width: 100%">
            <el-table-column type="selection"
                             width="40">
            </el-table-column>
            <el-table-column prop="uname"
                             label="用户名"
                             :show-overflow-tooltip="true"
                             width="130">
            </el-table-column>
            <el-table-column prop="cardno" label="会员编号" width="100"></el-table-column>
            <el-table-column prop="committee" label="专业委员会" width="160" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="cardstatus" label="会员状态" width="130">
                <template slot-scope="scope">
                    <span close-transition v-if="scope.row.cardstatus==0">未提交申请</span>
                    <span close-transition v-else-if="scope.row.cardstatus==1">已提交申请,待初审</span>
                    <span close-transition v-else-if="scope.row.cardstatus==2">初审不通过</span>
                    <span close-transition v-else-if="scope.row.cardstatus==3">已通过初审,待终审</span>
                    <span close-transition v-else-if="scope.row.cardstatus==4">终审不通过</span>
                    <span close-transition v-else-if="scope.row.cardstatus==5">已通过终审,待续费</span>
                    <span close-transition v-else-if="scope.row.cardstatus==6">正常续费</span>
                    <span close-transition v-else-if="scope.row.cardstatus==7">老会员,未续费</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="applytype" label="申请年限类型" width="110">
                <template slot-scope="scope">
                    <span close-transition v-if="scope.row.applytype==='0'">四年制/400元</span>
                    <span close-transition v-else-if="scope.row.applytype==='1'">终身制/1500元</span>
                </template>
            </el-table-column>
            <el-table-column prop="duration" label="入会期限" min-width="160">
                <template slot-scope="scope">
                    <span>{{scope.row.duration?scope.row.duration.replace(',',' ~ '):''}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="updatetime" label="最后更新时间" min-width="200">
                <template slot-scope="scope">
                    <span>{{scope.row.updatetime?$moment(scope.row.updatetime).format('YYYY-MM-DD HH:mm:ss'):''}}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right"
                             label="操作"
                             width="150">
                <template slot-scope="scope">
                    <el-button type="primary" @click="editVip(scope.$index, scope.row)" size="mini">查看/单独审核
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <div class="pagination" style="float: left">
            <el-pagination small
                           @current-change="handleCurrentChange" background
                           layout="total, prev, pager, next, jumper"
                           :current-page="cur_page"
                           :total="totalCount">
            </el-pagination>
        </div>

        <!--审核弹窗-->
        <el-dialog title="审核信息" :visible.sync="editFormVisible" width="400px">
            <el-form :model="form" size="mini" :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="审核状态：" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :label=true>通过</el-radio>
                        <el-radio :label=false>不通过</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="入会期限:" prop="duration">
                    <el-date-picker style="width: 100%;"
                                    v-model="form.duration"
                                    value-format="yyyy-MM-dd"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions2">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="审核原因:" prop="reason">
                    <el-input v-model="form.reason" placeholder="请输入审核原因" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false;resetForm()">取 消</el-button>
                <el-button type="primary" @click="sendAudit('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
        <!--导出会员信息弹窗-->
        <el-dialog title="导出会员信息" :visible.sync="exportFormVisible" width="400px">
            <el-form :model="form2" size="mini" :rules="rules2" ref="ruleForm2" label-width="100px">
                <el-form-item label="状态筛选：" prop="cardstatus">
                    <el-select v-model='form2.cardstatus' placeholder="请选择会员状态" style="width: 100%;">
                        <el-option value="  " label='全部'>全部</el-option>
                        <!--<el-option value="0" label='未提交申请'>未提交申请</el-option>-->
                        <el-option value="1" label='已提交申请,待初审'>已提交申请,待初审</el-option>
                        <el-option value="2" label='初审不通过'>初审不通过</el-option>
                        <el-option value="3" label='已通过初审,待终审'>已通过初审,待终审</el-option>
                        <el-option value="4" label='终审不通过'>终审不通过</el-option>
                        <el-option value="5" label='已通过终审,待缴费'>已通过终审,待缴费</el-option>
                        <el-option value="6" label='正常缴费'>正常缴费</el-option>
                        <el-option value="7" label='老会员,未续费'>老会员,未续费</el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="exportFormVisible = false;form2.cardstatus='4';">取 消</el-button>
                <el-button type="primary" @click="downExcel('ruleForm2')">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>

  export default {
    data: function () {
      return {
        isAdmin: false,    //是否为一级权限
        showAudit: true,   //是否显示审核按钮

        uname: '',         //查询条件
        committee: '',     //查询条件
        cardstatus: '  ',  //查询条件,默认显示该会员状态的列表
        tableData: [],
        selsData: [],
        pagerow: 10,
        cur_page: 1,
        totalCount: 0,
        editFormVisible: false,
        exportFormVisible: false,
        form: {
          uuid: '',
          duration: '',
          reason: '',
          type: '',
          status: true
        },
        form2: {
          cardstatus: '6'
        },
        rules: {
          status: [
            {required: true, message: '请选择审核状态', trigger: 'blur'}
          ]
        },
        rules2: {
          cardstatus: [
            {required: true, message: '请选择会员状态', trigger: 'blur'}
          ]
        },
        pickerOptions2: {
          shortcuts: [{
            text: '四年',
            onClick(picker) {
              const start = new Date();
              const end = new Date();
              end.setTime(end.getTime() + 3600 * 1000 * 24 * 365 * 4 + 3600 * 1000 * 24 * 1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '终身',
            onClick(picker) {
              const start = new Date();
              const end = new Date(253402185600000);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      }
    },
    methods: {
      selsChange(val) {
        this.selsData = val;
      },
      resetForm() {
        this.form = {
          uuid: '',
          duration: '',
          reason: '',
          type: '',
          status: true,
        }
      },
      //批量审核弹窗
      batchAudit() {
        var self = this;
        if (self.selsData.length == 0) {
          self.$message.error('当前没有选中任何会员!!!');
        } else {
          self.form.uuid = self.selsData.map(item => item.uuid).join(',')
          self.editFormVisible = true
        }
      },
      //批量审核请求
      sendAudit(ruleForm) {
        var self = this;
        self.$refs[ruleForm].validate((valid) => {
          if (valid) {
            if (self.form.duration) {
              self.form.duration = self.form.duration.join(',');
            }
            self.$axios.post('/vip/batchaudit', self.form)
              .then((res) => {
                if (res.data.code == 0) {
                  self.$message.info(res.data.message);
                  self.editFormVisible = false;
                  self.resetForm()
                  self.cur_page = 1;
                  self.findvip()
                } else {
                  self.$message.error(res.data.message);
                }
              }).catch(err => {
              self.$message.error('请求服务器失败，请稍后再试！');
            })
          }
        })
      },
      exportExcel() {
        this.exportFormVisible = true;
      },
      downExcel(ruleForm2) {
        var self = this;
        self.$refs[ruleForm2].validate((valid) => {
          if (valid) {
            var url = '/vip/exportxlsx?cardstatus=' + self.form2.cardstatus.trim()
            if (self.committee.trim() != '') {
              url += '&committee=' + self.committee
            }
            window.location.href = url
            // console.log(url);
            self.exportFormVisible = false;
            //reset form2
            self.form2.cardstatus = '6';
          } else {
            self.$message({
              message: '信息有误或者不完整，请重试。',
              type: 'warning'
            });
            return false;
          }
        })
      },
      getRoleInfo(fn) {
        let self = this
        self.$axios.post('/role/getroleinfo', {roleid: sessionStorage.getItem('utype')})
          .then(function (response) {
            if (response.data.code == 0) {
              if (response.data.data.rolename.substr(-5) == '专业委员会') {
                self.committee = response.data.data.rolename
                self.isAdmin = false
                self.cardstatus = '1'  //默认显示待初审
                self.form.type = '1'   //审核类型为初审
              } else if (response.data.data.rolename.substr(-3) == '管理员') {
                self.isAdmin = true
                self.cardstatus = '3'  //默认显示待终审
                self.form.type = '2'   //审核类型为终审
              }
              // console.log(response.data.data);
              if (fn) fn()
            } else {
              this.$message.error(response.data.message);
            }
          })
          .catch(function (error) {
            throw error;
            this.$message.error('请求网络失败，请稍后再试！');
          });
      },
      //查询
      search() {
        if (this.isAdmin) {
          this.showAudit = (this.cardstatus == 4 || this.cardstatus == 3 || this.cardstatus == 2 || this.cardstatus == 1) ? true : false
        } else {
          this.showAudit = (this.cardstatus == 1 || this.cardstatus == 2) ? true : false
        }
        this.cur_page = 1;
        this.findvip();
      },
      editVip(index, row) {
        this.$router.push({path: '/vip_edit', query: {uuid: row.uuid}});
      },
      //分页
      handleCurrentChange(val) {
        this.cur_page = val;
        this.findvip()
      },
      //获取会员列表
      findvip() {
        let self = this
        let params = {
          page: self.cur_page,
          pagerow: self.pagerow,
        }
        if (self.uname.trim() !== '') {
          params.uname = self.uname.trim()
        }
        if (self.committee.trim() !== '') {
          params.committee = self.committee
        }
        if (self.cardstatus.trim() !== '') {
          params.cardstatus = self.cardstatus
        } else {
          params.cardstatus = '{$ne:0}'
        }
        self.$axios.post('/vip/getvipbyfilter', params).then(function (response) {
          if (response.data.code == 0) {
            self.tableData = response.data.data;
            self.totalCount = response.data.rowcount
          } else {
            self.$message.error(response.data.message);
          }
        }).catch(() => {
          self.$message.error('请求服务器失败，请稍后再试！');
        })
      }
    },
    created() {
      var self = this;
      self.getRoleInfo(() => {
        self.findvip()
      })
    }
  }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }
    .fr {
        float: right;
    }
    .handle-input {
        width: 160px;
        display: inline-block;
    }
</style>
